<template>
  <div id="pie1" :style="{width: '100%', height: '400px'}"></div>
</template>

<script>
import { statisticalBycategoryId } from '@/api/assetsNew'

export default {
  data() {
    return {
      polar: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '45%',
            center: ['50%', '50%'],
            data: [],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    // 类别
    statisticalBycategoryId().then(res => {
      let arr = res.data
      let legendData = [],
        seriesData = []
      arr.map(v => {
        legendData.push(v.categoryName)
        seriesData.push({
          value: v.total,
          name: v.categoryName
        })
      })
      var dom = document.getElementById('pie1')
      var myChart = this.echarts.init(dom, 'light')
      this.polar.legend.data = legendData
      this.polar.series[0].data = seriesData

      myChart.setOption(this.polar)
    })
  }
}
</script>
